1. Cascading Style Sheets (CSS) and Dreamweaver
Outline
About Cascading Style Sheets ............................................................................................................................................................................ 1
Types of style sheets ...................................................................................................................................................................................... 1
Steps to create an external style sheet .............................................................................................................................................................. 2
Open CSS styles tab ........................................................................................................................................................................................ 2
Create style sheet ........................................................................................................................................................................................... 2
Save your stylesheet........................................................................................................................................................................................... 3
Link a style sheet to an HTML page.................................................................................................................................................................... 3
Experiment with the CSS features on your new document ............................................................................................................................... 4
So what if you want to add to or edit the existing styles provided? ................................................................................................................. 5
Edit Tag styles ................................................................................................................................................................................................. 5
Other styles .................................................................................................................................................................................................... 6
Understanding Styles and Making Additions ..................................................................................................................................................... 6
Adding block tag styles ................................................................................................................................................................................... 6
Adding class styles .......................................................................................................................................................................................... 6
Deleting styles ................................................................................................................................................................................................ 7
Additional Resources .......................................................................................................................................................................................... 7
About Cascading Style Sheets
Cascading Style Sheets (CSS) keep style separate from text and define how things appear in a browser. Example, you can use CSS to
define how all Heading 1 elements look on all pages in your site.
Types of style sheets
1) External style sheets – by far the most powerful way to use CSS. You define styles in a text file saved with a .css extension. Then
link your web pages to that style sheet.
• Use external style sheets when you want a style to be global (applied to multiple pages in a website). Then when you
revise a style in an external style sheet, the change is reflected on every page linked to the style sheet.
2) Internal style sheet – Styles are defined in the <head> section of an individual webpage. Internal styles apply only to the page
they are defined in. They may be useful if you wish to make exceptions to your site’s style rules for just one page.
12/23/2008 Page 1
Copyright, Office of Technology, Bloomsburg University
2. Cascading Style Sheets (CSS) and Dreamweaver
Steps to create an external style sheet
Open CSS styles tab
In Dreamweaver, click Window along the top menu bar > then choose CSS Styles.
Create style sheet
To get used to how CSS style sheets work, the easiest way to proceed is to apply an already created sheet in Dreamweaver.
Choose File > New > Page from Sample > CSS Style Sheet.
For this exercise click Text: Verdana and then press the Create button near the bottom of the window.
12/23/2008 Page 2
Copyright, Office of Technology, Bloomsburg University
3. Cascading Style Sheets (CSS) and Dreamweaver
The following is what populates the screen once you pick Text: Verdana.
Note the tag is written first
followed by a bracket {
Next there are specific
Save your defined
properties
stylesheet
Click Filea closing bracket }
Lastly – Save As and save
your style sheet. The most
common naming to delete is
Be careful not convention
style.css or punctuation or the
brackets
style will not work correctly!
Link a style sheet to an HTML page
To see the new stylesheet in action, create a new basic HTML page.
File > New > Blank > HTML and Create.
In the Title area type Test of CSS
To link a CSS sheet to your new page, look in the CSS panel on the right side of the Dreamweaver screen.
If not available click Window – CSS Styles.
Click the Attach Style Sheet icon.
12/23/2008 Page 3
Copyright, Office of Technology, Bloomsburg University
4. Cascading Style Sheets (CSS) and Dreamweaver
A window appears asking if you wish to link or import, either would work. However, most web designers choose the link option.
Click the Browse button to select your new style sheet. Choose Link and then OK.
You have now linked a style sheet to an HTML document. Now the fun begins!
Experiment with the CSS features on your new document
Apply heading1, heading2 and heading3 tags to your new document to see how they appear.
Type a line – “this is a sample of the small text option.” Highlight the word small and select .small from the Styles menu.
Type “here’s a sample of xbig styled text and use the .xbig style
Type “here’s text surrounded by a box style” and use the .box1 or .box2 style.
12/23/2008 Page 4
Copyright, Office of Technology, Bloomsburg University
5. Cascading Style Sheets (CSS) and Dreamweaver
So what if you want to add to or edit the existing styles provided?
Edit Tag styles
To edit a tag style, click on it in the CSS styles panel. These are the main items such as body, td, th, those items without a period (.) in
front of them (such as the .bodystyle item). You will see all the Properties for the style directly below the item you selected. Example:
Click on Body tag. If you wanted to apply a different background color, select that under background-color. Click in the box next to that
item to use the color picker. You could apply many items this way. As you apply new options they will be automatically written in your
css stylesheet. You will need to save both files to keep your new changes.
Note: You may also select the tag (i.e., body),
and then click the Pencil icon which will open a
window to apply changes. Either way is fine.
12/23/2008 Page 5
Copyright, Office of Technology, Bloomsburg University
6. Cascading Style Sheets (CSS) and Dreamweaver
Other styles
To edit the other styles, those with a period (.) in front of them (i.e., .bodystyle), select the item and edit the properties as described
above.
Understanding Styles and Making Additions
When you use a predefined style choice in
Dreamweaver, you are offered regular tags plus
style choices. There are many, many other things
you can do with CSS. More so than we have time
to go through in this tutorial.
Adding block tag styles
In the CSS properties area, click the + icon to add a new rule.
Select Tag radio button.
Select the tag you wish to define by using the drop down arrow.
The Define In area should have your active style sheet listed.
Click OK.
Add properties as you desire.
Adding class styles
In the CSS properties area, click the + icon to add a new rule.
12/23/2008 Page 6
Copyright, Office of Technology, Bloomsburg University
7. Cascading Style Sheets (CSS) and Dreamweaver
Select Class radio button.
Create a name for the style. Precede with a period (.) – example:
.redtext
The Define In area should have your active style sheet listed.
Click OK.
Add properties as you desire.
Deleting styles
Should you wish to delete a style, click on the item in the Styles properties
area and click the trash can icon.
Additional Resources
This tutorial provides a very basic overview of CSS. There is so much more that can be done using CSS. Two recommended resources:
• Book – Stylin’ with CSS by Charles Wyke-Smith
• W3 Schools Online CSS Tutorials - http://www.w3schools.com/css/default.asp
12/23/2008 Page 7
Copyright, Office of Technology, Bloomsburg University
